<template>
    <div class="login-box">
        <div class="login-container">
            <div class="login-title">地质灾害智慧分析管控平台</div>

            <el-form ref="ruleFormRef" size="large" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                <el-form-item prop="account">
                    <el-input :input-style="{ height: '56px' }" placeholder="账号" v-model="ruleForm.account" type="text"
                        autocomplete="off">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :input-style="{ height: '56px' }" placeholder="密码" show-password v-model="ruleForm.password"
                        type="password" autocomplete="off">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" class="button" type="primary" @click="hanldeLogin()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
// import { ElLoading } from 'element-plus'

import { useStore } from 'vuex'
let store = useStore()

// form 
const ruleForm = reactive({
    account: '',
    password: '',
})

// form验证
const rules = reactive({
    account: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})

// 点击登录
const ruleFormRef = ref(null)
let loading = ref(false);
const  hanldeLogin  = () => {
    ruleFormRef.value.validate(valid => {
        loading.value = true;
        // 验证成功
        if (valid) {
             store.dispatch('user/login', ruleForm).then(res => {
                router.push({ path: '/' })
                loading.value = false;
            }).catch(err => {
                loading.value = false;
            })
        } else {
            loading.value = false;
        }
    })
}

</script>

<style  scoped>
.login-box {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/images/data-bg.jpeg') no-repeat;
    background-size: 100% 100%;
}

.login-container {
    width: 500px;
    padding: 44px 55px;
    background: url('../../assets/images/login-input.png');
    box-sizing: border-box;
}

.login-title {
    text-align: center;
    font-size: 30px;
    color: #52b5ae;
    font-weight: 500;
    padding-bottom: 40px;
}

.button {
    width: 100%;
    background: #52b5ae;
    height: 58px;
    border: 1px solid #52b5ae;
    margin-top: 36px;
}
</style>